// pages/feedback/index.js
Page({

  data: {
    tabs: [  //tabs栏数据
      {
        id:0,
        value:'体验问题',
        isActive:true
      },
      {
        id:1,
        value:'商品、商家投诉',
        isActive:false
      }
    ],
    chooseImgs: [],  //被选中的图片的路径数组
    textVal: "",  //文本域的内容

  },

  //外网的图片的路径数组
  UpLoadImgs: [],

  //tabs栏 选项 点击事件
  //标题点击事件 从子组件传递过来
  handleTabsItemChange(e){
    //console.log(e)
      
      //1.获取被点击的标题索引
      const {index} = e.detail
      //2.修改源数组
      let {tabs} = this.data
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
      //3.赋值到data中
      this.setData({tabs})
    },

  //点击"+" 添加图片
  handleChooseImg(){

    //1 调用小程序内置的选择图片api
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        //console.log(result);

        //2 将选中的图片路径保存到data中
        this.setData({
          //数组拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      }
    });
  },  

  //点击×号 删除选中的图片
  handleRemoveImg(e){
    //获取被点击的组件的索引
    const { index } = e.currentTarget.dataset
    //console.log(index);

    //获取data中的图片数组
    let { chooseImgs } = this.data

    //删除元素
    chooseImgs.splice(index, 1)

    //将图片数组设置回data中
    this.setData({
      chooseImgs
    })
  },

  //文本域 input事件 触发的 回调函数
  handleTextInput(e){

    //将文本域中的内容 保存到 data中
    this.setData({
      textVal: e.detail.value
    })
  },

  //点击提交按钮
  handleFormSubmit(){
    //1 获取文本域的内容、图片数组
    const { textVal, chooseImgs } = this.data

    //2 检验合法性 是否为空
    if(!textVal.trim()){

      //提示内容为空
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      })

      //直接退出 不再往后执行
      return
    }

    //优化1：弹框提示 正在上传中
    wx.showLoading({
      title: "正在上传中...",
      mask: true
    });

    //优化2：判断 用户 是否选择了 要上传的图片
    if(chooseImgs.length !== 0){

      //3 准备上传图片到专门的图片服务器
      //遍历图片数组 挨个上传
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          url: 'https://img.coolcr.cn/api/upload',  //图片要上传到哪里 新浪图床 接口url
          filePath: v,  //被上传的文件的路径
          name: "image",  //上传的文件的名称 自定义  后台来获取文件 file
          formData: {},  //顺带的文本信息
          success: (result)=>{
            console.log(result);

            //解析json字符串 & 解构赋值: 取出图片的外网url
            let { url } = JSON.parse(result.data).data

            //保存到外网url数组中
            this.UpLoadImgs.push(url)
            console.log(this.UpLoadImgs);

            //4 判断 所有的图片 是否 都已经上传了
            if(i === chooseImgs.length-1){

              //5 把文本的内容和外网的图片数组提交到后台中
              //因为没有对应的后台接口，这里只是打印一句话来进行模拟~~~
              console.log("把文本的内容和外网的图片数组提交到后台中~~~");

              //优化：关闭 提示弹框
              wx.hideLoading();

              //6 重置页面内容
              this.setData({
                chooseImgs: [],  
                textVal: ""  
              })

              //7 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
                
            }
          }
        });
      })

    }else{

      //将用户输入的描述文本提交到后台服务器
      console.log("只是将用户输入的描述文本提交到后台服务器");

       //关闭 提示弹框
       wx.hideLoading();

      //返回上一个页面
      wx.navigateBack({
        delta: 1
      });
        
    }

  },

})



